<template>
  <div>
    <div class="shopping-cart">
      <h1>Shopping Cart</h1>

      <StuDemoson42 @addShop="addShop" @editShop="editShop" :spxj="spxj"></StuDemoson42>

      <!-- 商品列表 -->
      <div class="product-list">
        <slot v-for="item in spxj" :key="item.id">
          <StuDemoson4slot :item="item"></StuDemoson4slot>
        </slot>
      </div>

      <!-- 购物车总结 -->
      <div class="cart-summary">
        <StuDemoson41 :spxj="spxj" :sum="sums" @infodefu="infode"></StuDemoson41>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import StuDemoson4 from './StuDemoson4.vue'
import StuDemoson41 from './StuDemoson4-1.vue'
import StuDemoson42 from './StuDemo4-2.vue'

import { computed, reactive } from 'vue'
import StuDemoson4slot from './StuDemoson4slot.vue'

export interface Info {
  id: string
  title: string
  spdj: number
  geshu1: number
  imgs: string
}
const spxj = reactive<Info[]>([
  {
    id: '01',
    title: 'Product 1',
    spdj: 100,
    geshu1: 1,
    imgs: 'https://via.placeholder.com/100'
  },
  {
    id: '02',
    title: 'Product 2',
    spdj: 50,
    geshu1: 1,
    imgs: 'https://via.placeholder.com/100'
  }
])

const sums = computed(() => {
  return spxj.reduce((item, arr) => item + arr.spdj * arr.geshu1, 0)
})

const infode = () => {
  return alert(`商品价格:${sums.value},商品数：${spxj.length}`)
}

const addShop = () => {
  spxj.push({
    id: '03',
    title: 'Product 3',
    spdj: 50,
    geshu1: 1,
    imgs: 'https://via.placeholder.com/100'
  })
}

const editShop = (val: number) => {
  spxj[0].spdj = val
}
</script>

<style lang="scss" scoped>
/* 主体购物车样式 */
.shopping-cart {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

/* 商品列表 */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 购物车总结 */
.cart-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #ccc;
  text-align: right;
}
</style>
